<!-- 已废弃 -->
<template>
  <template v-for="el in columns[formId]">
    <u-card
      :show-head="!!el.title && el.visibleFlag"
      v-if="el.visibleFlag || el.list.some((i: any) => i.visibleFlag)"
    >
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">{{ el.title }}</text>
      </template>
      <template #body>
        <customForm
          v-if="el.list.some((i: any) => i.visibleFlag)"
          :data="formDetailList[formId]"
          :column="el.list"
          :empty-value="'无'"
        >
          <customFormItem
            v-for="e in el.list"
            :prop="e.prop"
            :label="e.label"
            :width="e.width"
            :visibleFlag="e.visibleFlag"
            :customValue="fileFeildList.includes(e.prop)"
          >
            <template v-if="fileFeildList.includes(e.prop)">
              <updateFileVue
                v-if="
                  formDetailList[formId][e.prop] &&
                  formDetailList[formId][e.prop].length > 0
                "
                v-model="formDetailList[formId][e.prop]"
                :onlyShow="true"
              ></updateFileVue>
              <text v-else>无</text>
            </template>
          </customFormItem>
        </customForm>
      </template>
    </u-card>
  </template>
</template>
<script lang="ts" setup>
import { formDetailApp } from '@/api/modules/form';
import { getVal } from '@/components/DynamicFormRender/config';
import { feildTypeValue, fixedCombinationCode } from '@/common/formConfig';
import customForm from '@/components/customForm/customForm.vue';
import customFormItem from '@/components/customForm/customFormItem.vue';
import updateFileVue from '@/components/updateFile.vue';

const props = defineProps<{
  formId: any;
}>();
const { formId } = toRefs(props);
const columns = ref<any>({});

const formDetailList = ref<any>({});
const fileFeildList = ref<any[]>([]);
const getFormDetails = (formId: any) => {
  const params = {
    formId,
    queryValueFlag: 1,
  };
  formDetailApp(params).then((res: any) => {
    formDetailList.value[res.formId] = res;
    columns.value[res.formId] = [];
    res.fieldList.forEach((item: any) => {
      // 标题
      if (item.fieldType === 8) {
        columns.value[res.formId].push({
          title: item.fieldName,
          fieldId: item.fieldId,
          visibleFlag: 1, // 默认为显示，后面统一处理不显示
          list: [],
        });
        return;
      }
      if (columns.value[res.formId].length === 0) {
        columns.value[res.formId].push({
          title: undefined,
          list: [],
        });
      }

      const temp =
        columns.value[res.formId][columns.value[res.formId].length - 1];
      // 固定组合值处理
      if (item.fieldType === 12) {
        const valueList = getVal(item, feildTypeValue[item.fieldType]);
        valueList.forEach((value: any, index: number) => {
          if (item.fieldName === '专业+PI+职称') {
            fixedCombinationCode.piInfo.forEach((el) => {
              temp.list.push({
                prop: el.prop + index,
                label: el.label,
                fieldId: item.fieldId,
                visibleFlag: 1,
              });
              formDetailList.value[res.formId][el.prop + index] = getVal(
                value,
                el.valueProp
              );
            });
          }
          if (item.fieldName === '申办方信息') {
            fixedCombinationCode.sponsorInfo.forEach((el) => {
              temp.list.push({
                prop: el.prop + index,
                label: el.label,
                fieldId: item.fieldId,
                visibleFlag: 1,
              });
              formDetailList.value[res.formId][el.prop + index] = getVal(
                value,
                el.valueProp
              );
            });
          }
          if (item.fieldName === 'CRO信息') {
            fixedCombinationCode.croInfo.forEach((el) => {
              temp.list.push({
                prop: el.prop + index,
                label: el.label,
                fieldId: item.fieldId,
                visibleFlag: 1,
              });
              formDetailList.value[res.formId][el.prop + index] = getVal(
                value,
                el.valueProp
              );
            });
          }
          if (item.fieldName === 'SMO信息') {
            fixedCombinationCode.smoInfo.forEach((el) => {
              temp.list.push({
                prop: el.prop + index,
                label: el.label,
                fieldId: item.fieldId,
                visibleFlag: 1,
              });
              formDetailList.value[res.formId][el.prop + index] = getVal(
                value,
                el.valueProp
              );
            });
          }
        });

        return;
      } else {
        temp.list.push({
          label: item.fieldName,
          prop: item.fieldId,
          fieldId: item.fieldId,
          visibleFlag: 1,
        });
      }
      // 多选值处理
      if ([5, 6].includes(item.fieldType)) {
        const optionValue = getVal(item, feildTypeValue[item.fieldType]) || [];
        const arr = optionValue.map((item: any) => item.label);
        formDetailList.value[res.formId][item.fieldId] = arr.join(',');
      } else if (item.fieldType === 9) {
        // 附件值处理
        fileFeildList.value.push(item.fieldId);
        const fileList = getVal(item, feildTypeValue[item.fieldType]);

        formDetailList.value[res.formId][item.fieldId] = (fileList ?? []).map(
          (el: any) => ({
            name: el.fileName,
            uid: el.fileId,
          })
        );
      } else {
        formDetailList.value[res.formId][item.fieldId] = getVal(
          item,
          feildTypeValue[item.fieldType]
        );
      }

      if (
        (item.fieldType === 6 && item.optionSource === 1) ||
        item.fieldType === 4
      ) {
        let _arr;
        if (item.fieldType === 4) {
          _arr = item.valueContextObj.optionVal
            ? [item.valueContextObj.optionVal.value]
            : [];
        } else {
          _arr = item.valueContextObj.optionsVal
            ? item.valueContextObj.optionsVal.map((i: any) => i.value)
            : [];
        }
        _arr.forEach((val: any) => {
          item.linkContent &&
            item.linkContent.forEach((el: any) => {
              if (el.optionVal === val) {
                el.linkedFields.forEach((field: any) => {
                  const _item = formDetailList.value[res.formId].fieldList.find(
                    (e: any) => e.frontId === field.linkFrontId
                  );
                  if (_item) {
                    _item.visibleFlag = field.visibleFlag;
                  }
                });
              }
            });
        });
      }
    });
    console.log('formDetailList', formDetailList.value);
    // 处理 visibleFlag
    formDetailList.value[res.formId].fieldList.forEach((item: any) => {
      if (item.visibleFlag === 0) {
        columns.value[res.formId].forEach((_columns: any) => {
          if (_columns.fieldId === item.fieldId) {
            _columns.visibleFlag = item.visibleFlag;
          } else {
            _columns.list.forEach((child: any) => {
              if (child.fieldId === item.fieldId) {
                child.visibleFlag = item.visibleFlag;
              }
            });
          }
        });
      }
    });
  });
};

getFormDetails(formId.value);
</script>
<style lang="scss"></style>
